<template>
    <el-card>
        <my-bread level1="订单管理" level2="订单列表"></my-bread>

        <el-table :data="tableData">
            <el-table-column
                prop="nub"
                align="center"
                label="订单编号"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="mony"
                align="center"
                label="订单价格(元)"
                width="110"
            >
            </el-table-column>
            <el-table-column
                prop="payment"
                align="center"
                label="是否付款"
                width="110"
            >
            </el-table-column>
            <el-table-column
                prop="deliver"
                align="center"
                label="是否发货"
                width="110"
            >
            </el-table-column>
            <el-table-column label="下单时间" align="center" width="110">
                <template slot-scope="scope">
                    {{ scope.row.time | fmtdate }}
                </template>
            </el-table-column>
            <el-table-column
                prop="address"
                align="center"
                label="收货地址"
                width="350"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="90">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="edit(scope.$index, scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改订单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="省市区" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "120px",
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            tableData: [
                {
                    nub: "52355",
                    mony: "100",
                    payment: "已付款",
                    deliver: "已发货",
                    address: "四川省乐山市市中区流水庭院",
                    time: new Date(),
                },
                {
                    nub: "643424",
                    mony: "100",
                    payment: "已付款",
                    deliver: "已发货",
                    address: "四川省乐山市市中区流水庭院",
                    time: new Date(),
                },
                {
                    nub: "234235",
                    mony: "100",
                    payment: "已付款",
                    deliver: "已发货",
                    address: "四川省乐山市市中区流水庭院",
                    time: new Date(),
                },
                {
                    nub: "732773",
                    mony: "100",
                    payment: "已付款",
                    deliver: "已发货",
                    address: "四川省乐山市市中区流水庭院",
                    time: new Date(),
                },
            ],
        };
    },
    methods: {
        edit(index) {
            this.dialogFormVisible = true;
        },
    },
};
</script>
<style >
.el-table {
    width: 85%;
    margin-top: 5px;
}
</style>